
div.tooltip {
  position: absolute;
  background: $tooltipBackground;
  border-radius: 2px;
  color: $tooltipTextColor;
  padding: 2px 4px 3px;
  max-width: 300px;
  font-size: $__tooltipFontSize;
  z-index: 2;
  transform: translate3d(-5px, 0, 0);
  transition: opacity 0.3s, transform 0.3s;
  @extend %hidden;

  &.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) !important;
  }

  > h3[data-num]::after { // for appearance preview
    content: " " attr(data-num);
  }

  &::before {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    left: -12px;
    border: 6px solid transparent;
    border-right-color: $tooltipBackground;
  }

  > h3 {
    font-weight: $__fontWeightNormal;
  }

  > span {
    opacity: 0.7;
    word-wrap: break-word;
  }

  > p {
    margin-top: 5px;
    padding-top: 3px;
    border-top: 1px solid rgba($tooltipTextColor, 0.7);
  }

  > ul.breadcrumb {
    margin-top: 4px;
    padding: 2px 0;
    border-top: 1px solid rgba($tooltipTextColor, 0.7);

    > li {
      display: inline-block;

      &:not(:last-child)::after {
        content: ">";
        margin: 0 4px;
        opacity: 0.7;
      }
    }
  }
}

section#sidebar[data-pos='right'] ~ div.tooltip {
  transform: translate3d(5px, 0, 0);

  &::before {
    left: auto;
    right: -12px;
    border-right-color: transparent;
    border-left-color: $tooltipBackground;
  }
}

@import "../dark/include/tooltip";
